<template>

    <div class="left-bar" v-if="detail.detail">
      <div class="inner">
        <div class="icon-wrap" @click="userInfo()">
          <div class="icon-img avatar">
            <div class="img"><img :src="getAvatarImg(detail)" alt=""></div>
          <span v-if="!computedHasFocus && hasFocus === false" @click.stop="focus" class="focus">+</span>
          </div>
          <p class="pdv-5"></p>
        </div>
        <div class="icon-wrap">
          <div class="icon-img icon-like" :class="doLike" @click.stop="djFlag && like()">
            <img v-if="!hasLiked()" src="../../../static/images/dangjian/video/icon-like.png" alt="">
            <img v-if="hasLiked()" src="../../../static/images/dangjian/video/icon-like-press.png" alt="">
          </div>
          <p class="text"><span class="inner-text">{{detail.ups || 0}}</span></p>
        </div>
        <div @click.stop="comment(detail)" class="icon-wrap">
          <div class="icon-img icon-msg"><img src="../../../static/images/dangjian/video/icon-msg.png" alt=""></div>
          <p class="text"><span class="inner-text">{{detail.comments || 0}}</span></p>
        </div>
      </div>

    </div>

</template>

<script>
  import _ from 'lodash'
  import imgLogo from '../../../static/images/dangjian/home/water-logo.png'
  export default {
    name: 'likeUpsComponent',
    props: ['data', 'personfocus'],
    data () {
      return {
        djFlag: true,
        hasFocus: false,
        doLike: '',
        ups: 0,
        detail: {}
      }
    },
    watch: {
      data (val, old) {
        if (val && val.id) {
//          this.detail = val
          this.detail = JSON.parse(JSON.stringify(this.data))
          this.listInterestedUser()
          this.fetchData()
        }
      },
      personfocus () {
        console.log('personfocus', this.personfocus)
        this.hasFocus = this.isHasFocus(this.data.createUser, this.$store.state.listInterestedUser)
      }
    },
    computed: {
      computedHasFocus () {
        if (!this.$store.state.listInterestedUser) {
          this.listInterestedUser()
          return false
        }
        if (''+this.data.createUser == 'undefined') {
          return this.isHasFocus(this.data.detail.newsContent.createUser, this.$store.state.listInterestedUser)
        } else {
          return this.isHasFocus(this.data.createUser, this.$store.state.listInterestedUser)
        }
      }
    },
    created () {
      this.init()
    },
    activated () {
      this.init()
    },
    methods: {
      init () {
        if (!this.data) {
          this.detail = this.$store.state.newsDetail
        } else {
          this.detail = JSON.parse(JSON.stringify(this.data))
          this.listInterestedUser()
        }
        console.log('likeUpsComponent init')
      },
      /*新闻详情*/
      fetchData () {
        this.fetchService.contentPageDetail(this.data.id).then(res => {
          console.log('获取详情', res)
          if (res.code === 0) {
            this.ups = res.data.newsContent.ups
            this.detail.ups = this.ups
            console.log('更新点赞数:' + this.ups)
          }
        })
      },
      getAvatarImg (item) {
        // 通过新接口获取用户头像
//        console.log('通过新接口获取用户头像', item)
        return this.tools.getAvatarUrl(item.detail.newsContent.createUser)
        if (!(item.photoId || (item.detail && item.detail.newsContent.photoId))) {
          return imgLogo
        }
        return this.tools.getImgUrl(item.photoId || (item.detail && item.detail.newsContent.photoId))
      },
      userInfo () {
        this.$parent.doPlay('child')
        if (this.detail.createUser) {
          this.$router.push({name: 'microVideo', query: {userId: this.detail.createUser}})
        } else if(this.detail.detail.newsContent.createUser){
          // this.$router.push({name: 'microVideo', query: {userId: this.detail.detail.newsContent.createUser}})
          this.$router.push({name: 'microVideo', query: {userId: this.detail.detail.newsContent.createUser}})
          // window.location.reload()
        }
        // this.$parent.userInfo()
      },
      hasLiked () {
        if (this.data) {
          return this.data.detail && this.data.detail.upOrDown
        }
        if (this.$store.state.newsDetail.detail) {
          return this.$store.state.newsDetail.detail.upOrDown
        }
        return false
      },
      focus () {
        console.log('this.detail',this.detail)
        let createUser =this.detail.createUser
        if ('' + this.detail.createUser == 'undefined') {
          createUser = this.detail.detail.newsContent.createUser
        }
        this.fetchService.smallVideoWatch(createUser).then(res => {
          this.listInterestedUser()
          if (res.code === 0) {
            this.$store.state.listInterestedUser.push({userId: createUser})
            this.$emit('focus')
            this.hasFocus = true
          } else {
            this.tools.tip(res.message)
          }
        })
      },
      like (e) {
        this.djFlag = false;
        console.log('1111111111111',this.hasLiked())
        this.$parent.doPlay('child')
        let params = {
          contentId: this.detail.id,
          type: this.hasLiked() ? 0 : 1,
        }
        if(typeof this.data.checkStatus != 'undefined' && this.data.checkStatus !== 1){//审核中或者审核不通过的不允许点赞
          if(this.data.checkStatus  === 2){
            this.tools.tip('该作品未通过审核，不允许点赞')
          }else if(this.data.checkStatus  === 0){
            this.tools.tip('该作品正在审核中，不允许点赞')
          }else{
            this.tools.tip('该作品不允许点赞')
          }
          setTimeout(() => {
            this.djFlag = true;
          }, 100);
          return
        }
        if (!this.hasLiked()) {//内容的点赞或点踩
          ++this.detail.ups
          if (this.data) {
            this.data.detail.upOrDown = true
          } else {
            this.$store.state.newsDetail.detail.upOrDown = true
          }
          this.doLike = 'animate__animated animate__bounceIn'
          setTimeout(() => {
            this.doLike = ''
          }, 2000)
          this.fetchService.newsUpsAndDowns(params).then(res => {
            if (res.code !== 0) {
              return this.tools.tip(res.message)
            }
          })
        }else{//取消内容的点赞或点踩
          --this.detail.ups
          if (this.data) {
            this.data.detail.upOrDown = false
          } else {
            this.$store.state.newsDetail.detail.upOrDown = false
          }
          this.doLike = 'animate__animated animate__bounceIn'
          setTimeout(() => {
            this.doLike = ''
          }, 2000)
          this.fetchService.cancelUpsAndDowns(params).then(res => {
            if (res.code !== 0) {
              return this.tools.tip(res.message)
            }
          })
        }
        setTimeout(() => {
          this.djFlag = true;
        }, 100);
      },
      comment (item) {
        this.$parent.doPlay('child')
        console.log('comment', item)
        console.log('this.data',this.data);
        console.log('this.data.checkStatus',this.data.checkStatus);
        // debugger
        if(typeof this.data.checkStatus != 'undefined' && this.data.checkStatus !== 1){//审核中或者审核不通过的不允许评论
          if(this.data.checkStatus  === 2){
            this.tools.tip('该作品未通过审核，不允许评论')
          }else if(this.data.checkStatus  === 0){
            this.tools.tip('该作品正在审核中，不允许评论')
          }else{
            this.tools.tip('该作品不允许评论')
          }
          return
        }
        this.$store.state.newsDetail = item
        window.douyinCommentInstance = this.$createCommentComponent({
          $props: {
            _contentId: item.id,
            type: 8,
            allowUp:false,
            allowCollection:false, //允许收藏
            allowShare:false //允许分享
          }
        }).show()
      },
      /*关注列表*/
      listInterestedUser () {
        if (this.$store.state.listInterestedUser) {
          this.hasFocus = this.isHasFocus(this.data.createUser, this.$store.state.listInterestedUser)
          return false
        }
        let params = {
          pageNo: 1,
          pageSize: 1000
        }
        this.fetchService.listInterestedUser(params).then(res => {
          if (res.code === 0) {
            this.$store.state.listInterestedUser = res.data
            this.hasFocus = this.isHasFocus(this.data.createUser, res.data)
          }
        })
      },
      /*判断是否关注*/
      isHasFocus (userId, list) {
        let ret = false
        list.some(v => {
          if (v.userId === userId) {
            ret = true
            return false
          }
        })
        return ret
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  $boxSizeRatio: 1.4;
  .left-bar {
    .inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .icon-img {
      width: 54px * $boxSizeRatio;
      height: 50px * $boxSizeRatio;
    }

    .icon-wrap {
      text-align: center;
      position: relative;
      .text {
        position: relative;
        height: 2em;
        z-index: 1;
        font-size: 16PX;
        .inner-text {
          white-space: nowrap;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .avatar {
      box-sizing: border-box;
      width: 60px * $boxSizeRatio * 1.2;
      height: 60px * $boxSizeRatio * 1.2;
      padding: 0;
      flex-shrink: 0;
      margin: 0;
      margin-bottom: 30px;
      border-radius: 100%;
      border: 1PX solid rgba(#fff, .6);
      font-size: 0;
      align-self: center;
      background: rgba(#fff, .6);
      position: relative;
      z-index: 2;
      .img {
        @include fullImg();
        border-radius: 100%;
        overflow: hidden;
        position: relative;
        background: $gray-color;
        img {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 100%;
          //height: auto;
          height: 100%;
        }
      }
      .focus {
        z-index: 2;
        position: absolute;
        display: block;
        left: 50%;
        transform: translate3d(-50%, -20%, 0);
        width: 32px * $boxSizeRatio;
        height: 32px * $boxSizeRatio;
        line-height: 32px * $boxSizeRatio;
        font-size: 32px * $boxSizeRatio;
        padding: 0;
        text-align: center;
        color: #fff;
        background-color: $theme-color;
        border-radius: 100%;
      }
      img {
        border-radius: 100%;
        margin: 0;
        padding: 0;
        @include fullImg();
      }
    }
  }
</style>
